<script setup>

import { defineProps } from 'vue'
defineProps({
  RelevantList: {
    type: Array,
    default: () => []
  },
  list: {
    type: Array,
    default: () => []
  }
})

</script>
<template>
    <div class="goods-relevant">
        <div class="header">
            <i class="icon"></i>
            <span class="title">同类商品推荐</span>
        </div>

            <carousel :swiper="list" style="height: 380px" ></carousel>

    </div>
</template>
<style scoped lang="less">
.goods-relevant{
    background-color: #fff;
    min-height: 460px;
    margin-top: 20px;
    .header{
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        .title{
            font-size: 20px;
            padding-left: 10px;
        }
        .icon{
            width: 16px;
            height: 16px;
            display: inline-block;
            border-top: 4px solid @xtxColor;
            border-right: 4px solid @xtxColor;
            box-sizing: border-box;
            position: relative;
            transform: rotate(45deg);
            &::before{
               content: '';
               width: 10px;
               height: 10px;
               position: absolute;
               left: 0;
               top: 2px;
               background: lighten(@xtxColor,40%);
            }
        }
    }
    ::v-deep .xtx-carouser{
        height: 380px;

            .carousel-indicator{
                bottom: 30px;
                span{
                    &.active{
                        background: @xtxColor;
                    }
                }
            }
            .carousel-btn{
                top: 110px;
                opacity: 1;
                background: rgba(0, 0,0, 0);
                color: #ddd;
                i{
                    font-style: 30px;
                }
            }

    }
}

</style>
